<template>
    <div>
        <!-- 预警基本信息:fzYjjbxx-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox fzYjjbxx">
            <div class="fzYjjbxx_form">
                <myform :fields="fields" @handleSelect="handleSelect" ref="form1" :rules="rules"
                    :model="model.warningBaseData" :options="options" class="m_t_16">
                </myform>
            </div>

            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.warningBaseData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { fzYjjbxxType } from './data'
import { copy,momentDate } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { FUND_REG, NUMBRT_REG } from '../../utils/regular'
import { CloseBold } from '@element-plus/icons-vue'
import moment from 'moment'
const model = {
    warningBaseData: {
        expiryDate: '',//到期日期
        guaBalance: '',//贷款余额
        guaCategory: '0',//五级分类状态
        overdueStart: '',//逾期起始日期
        overdueDays: '',//至今逾期天数
        overdueMoney: '',//逾期金额
        defaultInterest: '',//逾期利息及罚息
        customerType: '',//客户类型
        warnCause: '',//发出风险预警信号的原因
        warnContent: '',//风险预警内容
        warnRemark: '',//风险预警处理意见
        isReview: 1

    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: fzYjjbxxType = reactive({
            model: copy(model),
            status: true,
            id: '',
            name: '预警基本信息',
            subTitle: '',
            options: {
                customerType: [
                    {
                        name: '自然人',
                        id: 1
                    },
                    {
                        name: '法人',
                        id: 2
                    },
                ],
                guaCategory: [
                    {
                        label: '正常',
                        value: '0'
                    },
                    {
                        label: '关注',
                        value: '1'
                    },
                    {
                        label: '次级',
                        value: '2'
                    },
                    {
                        label: '可疑',
                        value: '3'
                    },
                    {
                        label: '损失类',
                        value: '4'
                    },
                ],
            },
            fields: [
                {
                    label: "到期日期",
                    prop: 'expiryDate',
                    placeholder: '请选择到期日期',
                    type: 'date',
                    disabled: true,
                    labelWidth: '200px'
                },
                {
                    label: "担保余额",
                    prop: 'guaBalance',
                    placeholder: '请输入担保余额',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "五级分类状态",
                    prop: 'guaCategory',
                    placeholder: '请选择五级分类状态',
                    type: 'radio',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "逾期起始日期",
                    prop: 'overdueStart',
                    placeholder: '请选择逾期起始日期',
                    type: 'date',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "至今逾期天数",
                    prop: 'overdueDays',
                    placeholder: '请输入至今逾期天数',
                    type: 'number',
                    labelWidth: '200px',
                    disabled: true,
                    unit: '天',

                },
                {
                    label: "逾期金额",
                    prop: 'overdueMoney',
                    placeholder: '请输入逾期金额',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "逾期利息及罚息",
                    prop: 'defaultInterest',
                    placeholder: '请输入逾期利息及罚息',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "客户类型",
                    prop: 'customerType',
                    placeholder: '请选择客户类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "发出风险预警信号的原因",
                    prop: 'warnCause',
                    placeholder: '请输入发出风险预警信号的原因',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "风险预警内容",
                    prop: 'warnContent',
                    placeholder: '请输入风险预警内容',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "风险预警处理意见",
                    prop: 'warnRemark',
                    placeholder: '请输入风险预警处理意见',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },

            ],
            fields1: [],
            rules: {
                expiryDate: [
                    { required: true, message: '请选择到期日期', trigger: 'change' },
                ],
                guaBalance: [
                    { required: true, message: '请输入担保余额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '担保余额格式不正确' }
                ],
                guaCategory: [
                    { required: true, message: '请选择五级分类状态', trigger: 'change' },
                ],
                overdueStart: [
                    { required: true, message: '请选择逾期起始日期', trigger: 'change' },
                ],
                overdueDays: [
                    { required: true, message: '请输入至今逾期天数', trigger: 'blur' },
                ],
                overdueMoney: [
                    { required: true, message: '请输入逾期金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '逾期金额格式不正确' }
                ],
                defaultInterest: [
                    { required: true, message: '请输入逾期利息及罚息', trigger: 'blur' },
                ],
                customerType: [
                    { required: true, message: '请选择客户类型', trigger: 'change' },
                ],
                // warnCause: [
                //     { required: true, message: '请输入发出风险预警信号的原因', trigger: 'blur' },
                // ],
                // warnContent: [
                //     { required: true, message: '请输入风险预警内容', trigger: 'blur' },
                // ],
                // warnRemark: [
                //     { required: true, message: '请输入风险预警处理意见', trigger: 'blur' },
                // ],
            },
            isReset: 2,
        })
        const router = useRouter()
        const form1 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //获取自定义表单
            getData() {
                formGet({ tag: 'fzYjjbxx' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset = res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.warningBaseData[item.prop]=''
                    })
                    data.fields1 = formStruct.formFields
                    data.fields.map((item: any) => {
                        if (item.prop != 'expiryDate' || item.prop != 'overdueDays') {
                            item.disabled = props.isAudit
                        }
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        if (localData.warningBaseData) {
                            for (let key in data.model.warningBaseData) {
                                if(localData.warningBaseData[key]!=null){
                                    data.model.warningBaseData[key] = localData.warningBaseData[key]
                                }
                            }
                        }
                       if(data.model.warningBaseData.guaCategory!=null){
                        data.model.warningBaseData.guaCategory=String( data.model.warningBaseData.guaCategory)
                       }
                       if(!data.model.warningBaseData.expiryDate){
                        data.model.warningBaseData.expiryDate=moment(new Date()).format('YYYY-MM-DD')
                }
                    } 
                    methods.handleSelect('overdueStart')
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            handleSelect(prop: string) {
                if (prop == 'overdueStart') {
                    data.model.warningBaseData.overdueDays = moment(new Date()).diff(data.model.warningBaseData.overdueStart, 'days')||'0'
                }
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    form1.value.verification().then((res) => {
                        resolve(data.model)
                    }).catch(() => {
                        reject(false)
                    })
                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1
        }
    }
})
</script>
<style lang='scss'>
.fzYjjbxx {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 200px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }
    }
}

.fzYjjbxx_form {

    .el-form-item:nth-child(9),
    .el-form-item:nth-child(10),
    .el-form-item:nth-child(11) {
        width: 100% !important;
    }
}
</style>